import { Checkbox,Button } from 'antd';

const EventItem = (props) => {
    const boxStyle = {
        overflow: 'hidden',
        marginBottom: '0.5em',
    };

    const buttonStyle = {
        float: 'right',
    };

    function clickCheckHandle() {
        props.dispatch({
            type: 'todolist/change',
            payload: {
                id: props.item.id,
            }
        });
    }

    function clickButtonHandle() {
        props.dispatch({
            type: 'todolist/del',
            payload: {
                id: props.item.id,
            }
        });
    }
    return (
        <div style={ boxStyle }>
            <Checkbox checked={ props.item.complete } onClick={ clickCheckHandle }>
                内容: {props.item.value}
            </Checkbox>
            <Button type="danger" size="small"
                style={ buttonStyle }
                onClick={ clickButtonHandle }
                >
                移除
            </Button>
        </div>
    );
}

export default EventItem;